<template>
  <div class="print-index br10 mgr20">
    <el-button type="primary" class="mgb10" @click="printTable()">打印表格</el-button>
    <el-button type="primary" class="mgb10" @click="printImage()">打印图片</el-button>
    <div id="printContent">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import printJS from 'print-js'

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]
const printTable = () => {
  printJS({
    printable: tableData,
    properties: ['date', 'name', 'address'],
    type: 'json',
    header: '人员管理信息'
  })
}
const printImage = () => {
  printJS({
    printable: [
      'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fbac4edf6-5045-4a32-91a4-d399aadbf0c2%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1689325627&t=7af1e45d1ce4d97222dba9d856db94d3',
      'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2F29cc3f5d-e57a-42ee-b9b0-f8dae1484c51%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1689325641&t=391c93c92a83d90e0c663f1c0ce279ec'
    ],
    type: 'image',
    header: 'Multiple Images',
    imageStyle: 'width:100%;'
  })
}
</script>

<style scoped>
.print-index {
  background-color: #fff;
  height: 100%;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
}
</style>
